<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="light dark" />
    <title>论文合集 · PaperInsight</title>
    <meta name="description" content="按分类与标签浏览 GNN / CV / RNN 论文合集，支持智能联动筛选。" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <!-- Header / Navigation -->
    <header class="site-header">
      <div class="container nav">
        <a class="brand" href="./index.html#home" aria-label="返回首页">
          <div class="brand-mark">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <defs>
                <linearGradient id="g1" x1="0" y1="0" x2="24" y2="24" gradientUnits="userSpaceOnUse">
                  <stop stop-color="#8A5AE6"/>
                  <stop offset="1" stop-color="#5B3CC4"/>
                </linearGradient>
              </defs>
              <rect x="3" y="3" width="18" height="18" rx="4" fill="url(#g1)" opacity="0.9"/>
              <path d="M8 9h8M8 12h8M8 15h5" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
            </svg>
          </div>
          <div class="brand-text">
            <span class="brand-title">PaperInsight</span>
            <span class="brand-sub">AI Research Papers</span>
          </div>
        </a>
        <nav class="menu" aria-label="主导航">
          <a href="./index.html#home">首页</a>
          <a aria-current="page" href="./collections.html">论文合集</a>
          <a href="./about.html">关于</a>
        </nav>
      </div>
    </header>

    <!-- Sub-hero with stats -->
    <section class="sub-hero">
      <div class="sub-hero-bg" aria-hidden="true"></div>
      <div class="container sub-hero-content">
        <h1>论文合集</h1>
        <p class="intro">按分类与标签筛选，快速定位 GNN / CV / RNN 领域的代表性工作。</p>
        <div class="stats" id="stats-bar">
          <div class="stat-card">
            <div class="stat-number" id="stat-total">0</div>
            <div class="stat-label">当前结果 · 论文数</div>
          </div>
          <div class="stat-card">
            <div class="stat-number" id="stat-cats">0</div>
            <div class="stat-label">涉及分类数</div>
          </div>
          <div class="stat-card">
            <div class="stat-number" id="stat-tags">0</div>
            <div class="stat-label">可用标签数</div>
          </div>
        </div>
      </div>
    </section>

    <main class="section">
      <div class="container collections-grid">
        <!-- Left: Category tree -->
        <aside class="sidebar" aria-label="分类导航">
          <div class="sidebar-header">
            <h2>分类导航</h2>
            <button class="btn btn-ghost btn-xs" id="btn-reset-category" aria-label="重置分类">全部分类</button>
          </div>
          <nav class="tree" id="category-tree" aria-label="类别树"></nav>
        </aside>

        <!-- Center: Filters and list -->
        <section class="main">
          <div class="filters-bar">
            <div class="filters-head">
              <h3>智能筛选器</h3>
              <div class="filters-meta"><span id="tags-count">0</span> 个相关标签</div>
            </div>
            <div class="chips" id="tags-bar">
              <!-- chips injected -->
            </div>
            <div class="filters-actions">
              <button class="chip chip-reset" id="btn-reset-tags" aria-label="重置标签">全部</button>
            </div>
          </div>

          <div class="paper-list" id="paper-list" aria-live="polite" aria-busy="false">
            <!-- paper cards injected -->
          </div>
        </section>

        <!-- Right: Side panel -->
        <aside class="rightbar">
          <div class="panel">
            <div class="panel-head">
              <h3>热门标签</h3>
              <small id="hot-tags-meta"></small>
            </div>
            <div class="chips" id="hot-tags"></div>
          </div>

          <div class="panel">
            <div class="panel-head">
              <h3>使用提示</h3>
            </div>
            <ul class="tip-list">
              <li>左侧选择分类或子类，右侧标签会联动更新。</li>
              <li>可多选标签（与条件），再次点击可取消。</li>
              <li>点击“全部”快速清空标签筛选。</li>
            </ul>
          </div>
        </aside>
      </div>
    </main>

    <footer class="site-footer">
      <div class="container footer-grid">
        <div class="foot-left">
          <p>© 2025 PaperInsight · Collections</p>
        </div>
        <div class="foot-right">
          <div class="badge"><span class="badge-dot"></span>总访问量：<strong>—</strong></div>
          <div class="badge"><span class="badge-dot"></span>独立访客：<strong>—</strong></div>
        </div>
      </div>
    </footer>

    <script src="./collections.js"></script>
  </body>
</html>
